웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리
[Nuxtjs] useFetch() 파라미터 및 쿼리스트링 변경시 다이나믹한 refresh 방법
Last Modified : 2023-02-25 / Created : 2023-02-21nuxtjs에서 서버사이드 렌더를 위해 페이지 레벨에서 useFetch() 라이프사이클 훅이 많이 쓰입니다.
만약 useFetch()를 사용한 곳에서 쿼리스트링이 변경되거나 필터링 변경 등의 이유로 파라미터를 바꿔 useFetch()를 다시 실행할 수 있을까요? 생각해보면 가장 먼저 watch를 사용하는 방법이 떠오를 수 있겠습니다. watch에서 감지할 쿼리스트링 값 또는 파라미터를 설정해 데이터를 fetch하는 방법이죠. 이 방법 외에 watch를 사용하지 않는 방법도 있는데요... 아래에서 알아봅니다.
먼저 useFetch()를 다시 실행하기 위해서 useFetch() 훅을 실행 후 반환된 값 중 하나인 $fetch 함수를 변수에 저장하는 방법입니다. 이를 원할 때 다시 실행하면 fetch 함수가 재실행될 수 있습니다.
방법은 이처럼 간단합니다. 참고로 객체가 반환하는 값은 상태값을 확인 할 수 있는 fetchState와 fetch 함수를 재실행 할 수 있는 $fetch가 포함되어 있습니다. 그래서 이 값을 컴포넌트 상태 값으로 저장하고 나중에 호출하면 되죠.
간단한 예제코드를 만들어 자세히 알아봅니다. 아래의 nuxtjs 컴포넌트는 refreshFetch 이름의 빈 상태값을 가지고 있습니다. 이제 setup() 내부의 useFetch() 훅을 호출할 때 반환되는 $fetch를 refreshFetch로 저장하고 추후 필요할 때 호출하는 방법입니다. 여기서는 버튼을 클릭할 경우 refreshFetch()를 호출하면 되겠습니다.
모든 과정은 여기까지 입니다. useFetch()를 재실행함으로써 얻을 수 있는 장점은 무엇일까요? 우선 watch를 따로 사용하지 않기 때문에 코드가 더 간결하고 로직이 단순하다는 점이 크겠습니다.
참고로, 만약 특정 이벤트 콜백이 없어 직접 실행하기 어렵다면? 이 경우는 watch()가 더 유용할 수 있겠습니다. 여기까지 useFetch() 훅을 사용시 재실행, refresh 방법에 대하여 알아봤습니다.
"useFetch()를 다시 실행할 수 있을까? refresh 방법은?"
만약 useFetch()를 사용한 곳에서 쿼리스트링이 변경되거나 필터링 변경 등의 이유로 파라미터를 바꿔 useFetch()를 다시 실행할 수 있을까요? 생각해보면 가장 먼저 watch를 사용하는 방법이 떠오를 수 있겠습니다. watch에서 감지할 쿼리스트링 값 또는 파라미터를 설정해 데이터를 fetch하는 방법이죠. 이 방법 외에 watch를 사용하지 않는 방법도 있는데요... 아래에서 알아봅니다.
# nuxtjs useFetch() 다시 실행하기, refresh
먼저 useFetch()를 다시 실행하기 위해서 useFetch() 훅을 실행 후 반환된 값 중 하나인 $fetch 함수를 변수에 저장하는 방법입니다. 이를 원할 때 다시 실행하면 fetch 함수가 재실행될 수 있습니다.
- useFetch()를 실행시 반환되는 객체의 값 중 $fetch()를 변수에 저장
- 저장된 변수를 원하는 시점에 호출하여 fetch 재실행
방법은 이처럼 간단합니다. 참고로 객체가 반환하는 값은 상태값을 확인 할 수 있는 fetchState와 fetch 함수를 재실행 할 수 있는 $fetch가 포함되어 있습니다. 그래서 이 값을 컴포넌트 상태 값으로 저장하고 나중에 호출하면 되죠.
! useFetch() refresh 예제보기
간단한 예제코드를 만들어 자세히 알아봅니다. 아래의 nuxtjs 컴포넌트는 refreshFetch 이름의 빈 상태값을 가지고 있습니다. 이제 setup() 내부의 useFetch() 훅을 호출할 때 반환되는 $fetch를 refreshFetch로 저장하고 추후 필요할 때 호출하는 방법입니다. 여기서는 버튼을 클릭할 경우 refreshFetch()를 호출하면 되겠습니다.
<template>
<button @click="refreshFetch">Refresh</button>
</template>
<script>
setup() {
const refreshFetch = ref();
const { $fetch } = useFetch(() => { fetchFunction });
refreshFetch.value = $fetch;
const onClickButton = () => {
refreshFetch();
}
return {
refreshFetch
}
}
</script>
<button @click="refreshFetch">Refresh</button>
</template>
<script>
setup() {
const refreshFetch = ref();
const { $fetch } = useFetch(() => { fetchFunction });
refreshFetch.value = $fetch;
const onClickButton = () => {
refreshFetch();
}
return {
refreshFetch
}
}
</script>
모든 과정은 여기까지 입니다. useFetch()를 재실행함으로써 얻을 수 있는 장점은 무엇일까요? 우선 watch를 따로 사용하지 않기 때문에 코드가 더 간결하고 로직이 단순하다는 점이 크겠습니다.
참고로, 만약 특정 이벤트 콜백이 없어 직접 실행하기 어렵다면? 이 경우는 watch()가 더 유용할 수 있겠습니다. 여기까지 useFetch() 훅을 사용시 재실행, refresh 방법에 대하여 알아봤습니다.
아래의 글도 찾고 계시지 않나요?